<template>
  <div>
    <div class="app-container">
      <el-col :span="12">
        <img src="@/assets/img/404.gif" alt="404" class="img404">
      </el-col>
      <el-col :span="12">
        <div style="margin-left: 100px; margin-top: 60px">
          <h1 class="color-main">OOPS!</h1>
          <h2 style="color: #606266">网管说这个页面你不能进......</h2>
          <div style="color:#909399; font-size: 14px">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
          <el-button style="margin-top: 20px" type="primary" round @click="handleReturnHomePage">返回首页</el-button>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Page404',
  methods: {
    handleReturnHomePage () {
      this.$router.push({path: '/'})
    }
  }
}
</script>

<style scoped>
  .app-container {
    width: 80%;
    margin: 120px auto;
  }

  .img404 {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
    user-select: none;
  }
</style>
